<template>
  <div class="box">
    <!-- 顶部栏 -->
    <van-nav-bar
      title="选择座位"
      left-arrow
      fixed
      placeholder
      z-index="999"
      @click-left="$router.back()"
    />

    <!-- 场次选择 -->
    <div class="session">
      <!-- 标题 -->
      <div class="title">
        <i style="font-size: 16px">{{ activeFilms.filmsName }}</i>
        <i style="color: gray"
          >{{ activeFilms.day }}日 {{ activeFilms.time1 }}</i
        >
      </div>
      <!-- 列表 -->
      <div class="sessionList">
        <div
          class="list"
          @click="changeTime(index)"
          :class="{ active: index == activeIndex }"
          v-for="(item, index) in filmsList"
          :key="item._id"
        >
          <!-- 时间 -->
          <div class="time">{{ item.time1 }}</div>
          <!-- 类型  -->
          <div class="type">{{ item.format | slice }}</div>
          <!-- 价格额 -->
          <div class="price">￥{{ item.price }}起</div>
        </div>
      </div>
    </div>

    <div class="chooseSeat">
      <!-- 类型介绍 -->
      <div class="seatType">
        <span>
          <svg class="xl-icon" aria-hidden="true">
            <use xlink:href="#icon-kexuanzuowei"></use>
          </svg>
          可选
        </span>
        <span>
          <svg class="xl-icon" aria-hidden="true">
            <use xlink:href="#icon-danrenzuoweixuanzuowei"></use>
          </svg>

          已选
        </span>
        <span>
          <svg class="xl-icon" aria-hidden="true">
            <use xlink:href="#icon-kexuanzuobiankuang"></use>
          </svg>
          已售
        </span>
        <span>
          <svg class="xl-icon online" aria-hidden="true">
            <use xlink:href="#icon-kexuanzuowei"></use>
          </svg>

          线上优先
        </span>
        <span>
          <svg class="xl-icon" aria-hidden="true">
            <use xlink:href="#icon-jinzhizuowei"></use>
          </svg>

          停售
        </span>
        <span>
          <svg class="xl-icon" aria-hidden="true">
            <use xlink:href="#icon-VIPzuo"></use>
          </svg>

          W
        </span>
      </div>
      <!-- 选择区域 -->
      <div class="chooseArea">
        <!-- 名字 -->
        <p>
          <i>{{ seatInfo.name }} {{ seatInfo.tips }}</i>
        </p>
        <!-- 坐标轴 -->
        <div class="axis">
          <i v-for="(i, index) of seatInfo.layout" :key="index">
            {{ i.rowNum == -1 ? "" : i.rowNum }}
          </i>
        </div>
        <!-- 座位 -->
        <div class="seats">
          <ul v-for="(item, index) of seatInfo.layout" :key="index">
            <li
              v-for="(item2, index2) in item.list"
              :class="{
                disabled:
                  item2.disabled || item2.seatType == '04' || item2.isBuy,
              }"
              @click="choose(index, index2, item2)"
              :key="index2"
            >
              <!-- 不可选 -->
              <svg class="xl-icon" aria-hidden="true" v-if="item2.disabled">
                <use xlink:href="#icon-jinzhizuowei"></use>
              </svg>
              <!--  空 -->
              <svg
                class="xl-icon"
                aria-hidden="true"
                style="opacity: 0"
                v-else-if="item2.seatType == '04'"
              >
                <use xlink:href="#icon-kexuanzuobiankuang"></use>
              </svg>
              <!-- 已售 -->
              <svg class="xl-icon" aria-hidden="true" v-else-if="item2.isBuy">
                <use xlink:href="#icon-kexuanzuobiankuang"></use>
              </svg>

              <!-- 被我们选中 -->
              <svg
                class="xl-icon"
                aria-hidden="true"
                v-else-if="item2.selected"
              >
                <use xlink:href="#icon-danrenzuoweixuanzuowei"></use>
              </svg>

              <template v-else>
                <svg
                  class="xl-icon"
                  aria-hidden="true"
                  v-if="item2.seatType == '01'"
                >
                  <use xlink:href="#icon-kexuanzuowei"></use>
                </svg>

                <svg
                  class="xl-icon online"
                  aria-hidden="true"
                  v-else-if="item2.seatType == '02'"
                >
                  <use xlink:href="#icon-kexuanzuowei"></use>
                </svg>
                <svg
                  class="xl-icon online"
                  aria-hidden="true"
                  v-else-if="item2.seatType == '03'"
                >
                  <use xlink:href="#icon-VIPzuo"></use>
                </svg>
              </template>
            </li>
          </ul>
        </div>
      </div>

      <div class="selectedSeat">
        <li v-for="(item, index) in selectedSeat" :key="index">
          <div class="close" @click="remove(index, item)">
            <van-icon name="cross" />
          </div>
          <div class="text">
            <p>{{ item.seatText }}</p>
            <p class="price">{{ item.price }}元</p>
          </div>
        </li>
      </div>

      <!-- 价格 -->
      <div class="price">
        <div class="tips">
          <p>一次最多可选择6个座位</p>
          <p>如遇优惠活动名额有限已支付页面为准</p>
        </div>
        <div style="color: #fc5869">
          ¥<i style="font-size: 20px">{{ totalPrice }}</i>
        </div>
      </div>
      <!-- 按钮 -->
      <button class="btn" @click="createOrder">选择座位</button>
    </div>

    <div
      class="popover"
      v-show="popoverShow"
      style="
        position: fixed;
        top: 50px;
        left: 0;
        background: rgba(0, 0, 0, 0.8);
      "
    >
      <div class="seats popup">
        <ul v-for="(item, index) of seatInfo.layout" :key="index">
          <li
            v-for="(item2, index2) in item.list"
            :class="{
              disabled: item2.disabled || item2.seatType == '04' || item2.isBuy,
            }"
            @click="choose(index, index2, item2)"
            :key="index2"
          >
            <!-- 不可选 -->
            <svg class="xl-icon" aria-hidden="true" v-if="item2.disabled">
              <use xlink:href="#icon-jinzhizuowei"></use>
            </svg>
            <!--  空 -->
            <svg
              class="xl-icon"
              aria-hidden="true"
              style="opacity: 0"
              v-else-if="item2.seatType == '04'"
            >
              <use xlink:href="#icon-kexuanzuobiankuang"></use>
            </svg>
            <!-- 已售 -->
            <svg class="xl-icon" aria-hidden="true" v-else-if="item2.isBuy">
              <use xlink:href="#icon-kexuanzuobiankuang"></use>
            </svg>

            <!-- 被我们选中 -->
            <svg class="xl-icon" aria-hidden="true" v-else-if="item2.selected">
              <use xlink:href="#icon-danrenzuoweixuanzuowei"></use>
            </svg>

            <template v-else>
              <svg
                class="xl-icon"
                aria-hidden="true"
                v-if="item2.seatType == '01'"
              >
                <use xlink:href="#icon-kexuanzuowei"></use>
              </svg>

              <svg
                class="xl-icon online"
                aria-hidden="true"
                v-else-if="item2.seatType == '02'"
              >
                <use xlink:href="#icon-kexuanzuowei"></use>
              </svg>
              <svg
                class="xl-icon online"
                aria-hidden="true"
                v-else-if="item2.seatType == '03'"
              >
                <use xlink:href="#icon-VIPzuo"></use>
              </svg>
            </template>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
let timer = null;
export default {
  data() {
    return {
      activeIndex: 0,
      seatInfo: {},
      selectedSeat: [], //  放我们被选中的座位的信息
      popoverShow: false,
    };
  },
  filters: {
    slice(val) {
      let index = val.lastIndexOf("/");
      return val.slice(0, index);
    },
  },
  computed: {
    filmsList() {

      // seesionStorage  更好一点
      let data = this.$route.query.filmsList
      if(data){
        return JSON.parse(data)
      }else{
          return []
      }
     
    },
    activeFilms() {
      return this.filmsList[this.activeIndex];
    },
    bookId() {
      return this.activeFilms._id;
    },
    totalPrice() {
      let num = 0;
      this.selectedSeat.forEach((v) => {
        num += Number(v.price);
      });

      return num;
    },
  },
  created() {
    // console.log(this.$route.params);
    this.activeIndex = this.$route.query.index;

    this.getSeat();
  },
  methods: {
    // 确认选择座位
    createOrder(){

       //  验证一下 选了座位没 

       let {selectedSeat,bookId} = this;

       if(selectedSeat.length === 0){
         this.$toast('请先选择座位')
         return 
       }
      let uni_id_token = localStorage.getItem('xl-token');//  token  
      if(!uni_id_token){
        this.$toast('请先登录')
        setTimeout(v=>{
           this.$router.push('/login')
        },500)
        return  
      }

    let layout =   selectedSeat.map(v=>{
        let {index,index2} = v;
        return `${index}_${index2}`
      }).join()

      console.log(selectedSeat)
      console.log(uni_id_token)
      console.log(bookId)


     

    this.$http.post('/apis/book/kh/book',{
      layout,
      uni_id_token,
        bookId
    })
    .then(res=>{
        console.log(res)

        if(res.code == 0){
          this.$toast('操作成功')
        let {id} = res;


        // 总价钱  
        //  商品的名字  

     let {totalPrice} = this;

           let filmsName = this.activeFilms.filmsName;//  电影名字
      let filmsNum = selectedSeat.length;


    //  let 
          this.$router.push(`/pay?orderId=${id}&totalPrice=${totalPrice}&goodsName=${filmsName}电影票${filmsNum}张`)
        }else{
          this.$toast(res.msg)
        }
    })



    },
    //  切换时间
    changeTime(index) {
      this.activeIndex = index;
      //  调用这个接口
      this.getSeat();
    },
    choose(index, index2, item) {
      // console.log(index);
      // console.log(index2);
      // console.log(item);

      let { seatType, disabled, isBuy } = item;

      //  isBUy  已售  disabled  不可选   04  空
      if (isBuy || disabled || seatType == "04") {
        return;
      }

      //   选中  和取消选中  效果

      /// 有几种情况下  数据变化 试图不更新
      let { selected } = this.seatInfo.layout[index].list[index2]; //  获取到他原来的状态
      // console.log(selected)
      if (selected) {
        let left = this.seatInfo.layout[index].list[index2 - 1];

        let right = this.seatInfo.layout[index].list[index2 + 1];

        if (left && left.selected && right && right.selected) {
          this.$toast("不允许取消中间的位置,请选个别的");
          return;
        }

        //  原来选中的位置  不要了  取消掉
        this.seatInfo.layout[index].list[index2].selected = false;

        // 计算一下  点击的这个 在selectedSeat  的位置

        let _index = this.selectedSeat.findIndex(
          (v) => v.seatText == item.seatText
        );

        this.selectedSeat.splice(_index, 1);
      } else {
        //  去选

        //  增加的时候 判断数量  》=6  return
        if (this.selectedSeat.length >= 6) {
          this.$toast("一次最多选6个座位");
          return;
        }

        //  当我点击一个空座位时
        //  判断一下我的左侧是否是空的   如果左侧是空的 并且我的  我左侧的左侧也是我选的 这个时候不让选

        let left = this.seatInfo.layout[index].list[index2 - 1];
        let left2 = this.seatInfo.layout[index].list[index2 - 2];

        let right = this.seatInfo.layout[index].list[index2 + 1];
        let right2 = this.seatInfo.layout[index].list[index2 + 2];

        if (
          left &&
          !left.selected &&
          !left.isBuy &&
          !left.disabled &&
          !left.seatType != "04" &&
          left2 &&
          left2.selected
        ) {
          this.$toast("不能留空座位");
          return;
        }
        if (
          right &&
          !right.selected &&
          !right.isBuy &&
          !right.disabled &&
          !right.seatType != "04" &&
          right2 &&
          right2.selected
        ) {
          this.$toast("不能留空座位");
          return;
        }

        this.seatInfo.layout[index].list[index2].selected = true;

        this.selectedSeat.push({
          ...item,
          index,
          index2,
        });
      }

      this.popoverShow = true;
      clearTimeout(timer);

      timer = setTimeout((V) => {
        this.popoverShow = false;
      }, 1000);

      this.$forceUpdate();
    },
    //  移除已选
    remove(i, { index, index2 }) {
      console.log(i);

      let left = this.seatInfo.layout[index].list[index2 - 1];

      let right = this.seatInfo.layout[index].list[index2 + 1];

      if (left && left.selected && right && right.selected) {
        this.$toast("不允许取消中间的位置,请选个别的");
        return;
      }
      this.selectedSeat.splice(i, 1);
      this.seatInfo.layout[index].list[index2].selected = false;
    },
    getSeat() {
      let { bookId } = this;
      this.$http
        .post("/apis/book/pub/getDetail", {
          bookId,
        })
        .then((res) => {
          console.log(res);
          if (res.rows.length) {
            this.seatInfo = res.rows[0];
          }
        });
    },
  },
};
</script>

<style scoped lang="scss">
.box {
  .session {
    .title {
      padding: 15px;
      display: flex;
      justify-content: space-between;
    }
    .sessionList {
      display: flex;
      align-content: center;
      padding-left: 10px;
      .list {
        margin-right: 10px;
        padding: 5px;
        text-align: center;
        border: 1px solid #e8d9d9;
        div {
          padding: 2px 0;
        }
        .time {
          font-weight: bold;
        }
        .type {
          color: rgb(173, 165, 165);
          font-size: 11px;
        }
        .price {
          color: #fc5869;
        }
      }
      .active {
        background: #fc5869;
        .type,
        .price,
        .time {
          color: white;
        }
      }
    }
  }

  .seats {
    margin: 12px 5px 0 45px;
    // height: 265px;
    display: block;
    overflow-x: scroll;
    // 附加一个class
    &.popup {
      margin: 0;
      li {
        font-size: 11px;
      }
    }

    ul {
      padding: 0;
      margin: 0;
      white-space: nowrap;
    }
    li {
      display: inline-block;
      line-height: 20px;
      margin: 1.5px 2px;
      font-size: 23px;
      &.disabled {
        color: #f00;
        pointer-events: none;
      }
    }

    i {
      height: 20px;
      margin: 1.5px 2px;
      font-size: 23px;
    }
  }

  .chooseSeat {
    .seatType {
      padding: 25px 15px;
      display: flex;
      justify-content: space-around;
    }
    .chooseArea {
      position: relative;
      background: #e6e6e6;
      min-height: 100px;
      width: 100%;
      p {
        text-align: center;
        i {
          border-radius: 0px 0px 60px 60px;
          background: #bebebe;
          padding: 3px 35px;
        }
      }
      .axis {
        position: absolute;
        border-radius: 10px;
        color: white;
        left: 5px;
        display: flex;
        flex-direction: column;
        background: #bebebe;
        width: 20px;
        align-items: center;
        height: 90%;
        justify-content: center;
        i {
          margin: 2px 0;
        }
      }
    }
    .price {
      display: flex;
      justify-content: space-between;
      padding: 5px 15px;
      align-items: center;
      .tips {
        color: #a7a3a3;
        font-size: 13px;
      }
    }
    .btn {
      border: none;
      color: white;
      background: #fc5869;
      height: 50px;
      width: 100%;
    }
  }
}

.online {
  color: #a8ede9;
}

.selectedSeat {
  padding: 5px;
  overflow: scroll;
  margin: 10px 0;

  li {
    display: inline-block;
    width: 100px;
    height: 44px;
    border: 1px solid #eee;
    position: relative;

    .close {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 0;
    }

    .text {
      width: 100px;
      height: 44px;
      // line-height: 44px;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      p {
        margin: 0;
      }
      .price {
        color: #fc5869;
      }
    }
  }
}
</style>
